<template>
	<div class="login">
		<div class="banner">
			<p><router-link to="/"><img src="../../../static/image/log.png" /></router-link></p>
		</div>
		<div class="info">
			<div class="info-title">登录|注册</div>
			<div class="info-form">
				<form>
					<div>
						<span><i></i></span>
						<input v-model="userphone" @keyup="phoneyz" type="text" id="usertel" maxlength="11" placeholder="请输入您的手机号" />
						<div></div>
						<p class="error" id="active1"><span></span>{{phoneerror}}</p>
					</div>
					<div>
						<span><i></i></span>
						<input v-model="codevel" @keyup="codeyz" type="text" id="usercode" maxlength="4" placeholder="请输入字符验证码" />
						<button @click="codeclick" class="btncode">{{codenum}}</button>
						<p class="error" id="active2"><span></span>{{codeerror}}</p>
					</div>
					<div>
						<span><i></i></span>
						<input v-model="houquval" @keyup="houquyz" type="text" id="usercodephone" maxlength="6" placeholder="请输入短信验证码" />
						<button @click="phonecode" id="btnyzm">发送验证码</button>
						<p class="error" id="active3"><span></span>{{houquerror}}</p>
					</div>
					<input type="submit" id="submit" @click="submits" value="登 录" />
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				userphone: "",
				phoneerror: "",
				codevel: "",
				codenum: "asdf",
				codeerror: "",
				houquNum: "",
				houquval: "",
				houquerror: "",
				flag: false,
				userName:"",
				btnFla:false
			}
		},
		methods: {
			//验证电话号码
			phoneyz() {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (this.userphone.length == 11) {
					if (!myreg.test(this.userphone)) {
						this.phoneerror = "请输入正确的电话号码";
						$("#active1").show();
						this.flag = false;
					} else {
						$("#active1").hide();
						this.flag = true;
						//判断用户是否存在
						var userPhone = $("#usertel").val();
						var _this = this;
						_this.axios.get(_this.ajaxUrls+'/api/User/find?user_name='+userPhone).then(function(res){
							if(res.data.length == 0){
								_this.userName = 0;
								console.log('用户不存在');
							}else{
								_this.userName = 1;
								console.log('用户存在');		
								
								//保存用户id
								localStorage.setItem("userId",res.data[0].id);
							}							
						}).catch(function(err){
							console.log(err);
						})
					}
				} else if (this.userphone.length == 0) {
					$("#active1").hide();
					this.flag = false;
				}
			},
			//图片验证码
			codeclick() {
				var code = "";
				var codearr = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z");
				for (var i = 0; i < 4; i++) {
					var index = Math.floor(Math.random(codearr) * 26);
					code += codearr[index];
				}
				this.codenum = code;
			},
			//验证图片验证码
			codeyz() {
				if (this.codevel.length == 4) {
					if (this.codenum != this.codevel) {
						this.codeerror = "验证码输入错误，点击再次获取";
						$("#active2").show();
						this.flag = false;
					} else {
						$("#active2").hide();
						this.flag = true;
					}
				} else {
					$("#active2").hide();
					this.flag = false;
				}
			},
			//短信验证码获取
//			houqu() {
//				var num = "";
//				for (var i = 0; i < 6; i++) {
//					num += Math.floor(Math.random() * 9);
//				}
//				this.houquNum = num;
//				console.log(this.houquNum)
//			},
			phonecode() {
				if (this.flag == false) {
					this.phoneerror = "请输入电话号码";
					$("#active1").show();
					this.codeerror = "请输入验证码";
					$("#active2").show();
					this.flag = false
				}else if($("#usertel").val() == ""){
					this.phoneerror = "请输入电话号码";
					$("#active1").show();
					this.flag = false
				}else if($('#usercode').val() == ""){
					this.codeerror = "请输入验证码";
					$("#active2").show();
					this.flag = false
				} else {
					this.codeerror = "验证码正确，发送至" + this.userphone;
					$("#active2").show().css("color", "#999999").children("span").hide();
					var time = 60;
					$("#btnyzm").removeClass("btnyzm");
					if(!this.btnFla){
						//调用短信接口
						var _this = this;
						var data = {
							usertel:this.userphone
						}
						_this.axios.post(this.ajaxUrls+'/api/Message/sendMsg',_this.qs.stringify(data)).then(function(res){
							//输出验证码						
							_this.houquNum = res.data;
						}).catch(function(err){
							console.log(err);
						})
						this.btnFla = true;
						var auth_timetimer = setInterval(() => {
							time--;
							$("#btnyzm").text("剩余" + time + "秒");
							if (time <= 0) {
								$("#btnyzm").text("重新获取").css("background", "#F3B240");
								this.btnFla = false;
								time = 60;
								this.houquNum = "";
								clearInterval(auth_timetimer);
							}
						}, 1000)
					}
					
				}
			},
			//验证短信验证码
			houquyz() {
				if (this.houquval.length == 6) {
					if (this.houquNum != this.houquval) {
						this.houquerror = "请输入正确的短信验证码";
						this.flag = false;
					} else {
						$("#active3").hide();
						this.flag = true;
					}
				} else {
					$("#active3").hide();
					this.flag = false;
				}
			},
			//登录验证
			submits() {
				if (this.flag == false) {
					this.phoneerror = "请输入电话号码";
					this.codeerror = "请输入验证码";
					this.houquerror = "请输入短信验证码";
					$("#active1").show();
					$("#active2").show();
					$("#active3").show();
				}else if($("#usertel").val() == ""){
					this.phoneerror = "请输入电话号码";
					$("#active1").show();
					this.flag = false
				}else if($('#usercode').val() == ""){
					this.codeerror = "请输入验证码";
					$("#active2").show();
					this.flag = false
				}else if($('#usercodephone').val() == ""){
					this.houquerror = "请输入短信验证码";
					$("#active3").show();
					this.flag = false
				}else{
					var userPhone = $("#usertel").val();
					//注册
					if(this.userName == 0){		
						var _this = this;
						_this.axios.get(_this.ajaxUrls+'/api/User/add?user_name='+userPhone).then(function(res){
							if(res.data == 1){
								console.log('注册成功');
								//查询用户ID保存
								_this.axios.get(_this.ajaxUrls+'/api/User/find?user_name='+userPhone).then(function(res){
									if(res.data.length == 0){
										_this.userName = 0;
										console.log('用户不存在');
									}else{
										_this.userName = 1;
										console.log('用户存在');		
										
										//保存用户id
										localStorage.setItem("userId",res.data[0].id);
										
										_this.$router.push("/my");
									}							
								}).catch(function(err){
									console.log(err);
								})
							}else{
								console.log('注册失败');
							};
						}).catch(function(err){
							console.log(err);
						});
					}else{
						//登录this.$router.push({path:"/my",query:{tel:userPhone}});
						this.$router.push("/my");
					}
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.login {
		width: 100%;
		height: auto;
	}
	
	.banner {
		width: 100%;
		height: 4.94rem;
		background: url(../../../static/image/login_banner.jpg);
		background-size: 100%;
	}
	
	@import url("global.css");
	.banner p {
		padding: 0.1rem;
		width: 1rem;
		height: 1rem;
	}
	
	.banner p img {
		width: 100%;
	}
	
	.info {
		width: 100%;
		height: auto;
	}
	
	.info-title {
		widows: 100%;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		color: #333;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.info-form {
		width: 100%;
		height: auto;
		padding: 0 0.6rem;
		box-sizing: border-box;
	}
	
	.info-form div {
		width: 100%;
		height: 1.2rem;
		border-bottom: 1px solid #999;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	
	.info-form div:first-of-type {
		width: 100%;
		height: 1.2rem;
		border-bottom: 1px solid #999;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.info-form div span {
		width: 0.5rem;
		height: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.info-form div span i {
		width: 0.25rem;
		height: 0.36rem;
	}
	
	.info-form div:first-of-type i {
		background: url(../../../static/image/icon_user_05.png);
		background-size: 100%;
	}
	
	.info-form div:nth-of-type(2) i {
		background: url(../../../static/image/icon_user_06.png);
		background-size: 100%;
	}
	
	.info-form div:last-of-type i {
		background: url(../../../static/image/icon_user_07.png);
		background-size: 100%;
	}
	
	.info-form div input {
		margin: 0 0.3rem;
		box-sizing: border-box;
		height: 90%;
		border: none;
	}
	
	.info-form div:nth-of-type(2) button {
		width: 2.5rem;
		height: 50%;
		font-size: 0.3rem;
		color: #333333;
		border: none;
		background: none;
		font-family: "Buxton Sketch";
		font-size: 0.5rem;
		letter-spacing: 0.1rem;
	}
	
	button:focus {
		outline: 0;
	}
	
	.info-form div:last-of-type button {
		width: 2.5rem;
		height: 50%;
		font-size: 0.25rem;
		color: white;
		border: none;
		border-radius: 5px;
	}
	
	.info-form #submit {
		width: 100%;
		height: 0.8rem;
		margin-top: 1rem;
		border-radius: 10px;
		color: white;
		font-size: 0.4rem;
	}
	
	.info-form input {
		border: none;
	}
	
	.error {
		width: 100%;
		height: 0.5rem;
		position: absolute;
		bottom: -0.5rem;
		z-index: 11;
		color: red;
		font-size: 0.25rem;
		padding: 0 0.8rem;
		box-sizing: border-box;
		display: none;
		line-height: 0.5rem;
	}
	
	.error span {
		display: inline-block;
		width: 0.17rem;
		height: 0.17rem;
		background: url(../../../static/image/icon_user_08.png) no-repeat;
		float: left;
		margin-top: 0.15em;
	}
</style>